<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-icon"></div>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="off" label-position="left">

      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="account">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>

        <input type="text"  v-model="loginForm.account" @keyup="vaildFiled('account')" @blur="vaildFiled('account')" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <input :type="passwordType"  autocomplete="new-password" name="password" ref="password" v-model="loginForm.password" @keyup.enter="handleLogin" @keyup="vaildFiled('password')" @blur="vaildFiled('password')" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" />
        </span>
      </el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
    </el-form>
    <!-- <footer>2016 北京赛思信安技术股份有限公司 版权所有 京ICP备11004889号</footer> -->
  </div>
</template>

<script>
export default {
    name: 'Login',
    data () {
        return {
            loginForm: {
                account: '',
                password: ''
            },
            loginRules: {
                account: [{ required: true, trigger: 'blur', message: '请输入账号' }],
                password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
            },
            passwordType: 'password',
            loading: false,
            showDialog: false,
            redirect: undefined
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    created () {
        this.loginForm.account = ''
        this.loginForm.password = ''
    },
    methods: {
    // 验证表单
        vaildFiled (filed) {
            this.$refs.loginForm.validateField(filed)
        },
        showPwd () {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
        },
        // 表单提交
        handleLogin () {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$store
                        .dispatch('LoginByUsername', this.loginForm)
                        .then((data) => {
                            this.loading = false
                            this.$router.push({ path: this.redirect || '/home' })
                            this.$store.dispatch('GenerateRoutes', data.adminApp)
                        })
                        .catch(() => {
                            this.$message.error('用户名或密码错误!')
                            this.loading = false
                        })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        afterQRScan () {
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #eee;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
	.login-container .el-input input {
		color: $cursor;
		&::first-line {
			color: $light_gray;
		}
	}
}

/* reset element-ui css */
.login-container {
	input {
		display: inline-block;
		height: 47px;
		width: 85%;
		background: transparent;
		border: 0px;
		-webkit-appearance: none;
		border-radius: 0px;
		padding: 12px 5px 12px 15px;
		color: $light_gray;
		height: 47px;
		caret-color: $cursor;
		&:-webkit-autofill {
			-webkit-box-shadow: none;
			box-shadow: none;
			-webkit-text-fill-color: $cursor !important;
		}
	}
	.el-alert {
		margin-bottom: 10px;
	}
	.el-form-item {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #454545;
	}
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;
$bg: #2d3a4b;
.login-container {
	position: fixed;
	height: 100%;
	width: 100%;
	background: url(../../assets/login.jpg) repeat;
	background-size: 120% 100%;
	.login-box {
		position: relative;
		height: 32%;
		width: 100%;
		.login-icon {
			height: 100%;
			background: url(../../assets/loginLogo.png);
			background-size: 37% 65%;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}
	.login-form {
		position: absolute;
		left: 0;
		right: 0;
		width: 480px;
		max-width: 100%;
		padding: 35px 35px 15px 35px;
		margin: 0px auto;
		background: rgba(0, 0, 0, 0.5);
	}
	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;
		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}
	.svg-container {
		padding: 6px 5px 6px 15px;
		color: $dark_gray;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}
	.title-container {
		position: relative;
		.title {
			font-size: 26px;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}
		.set-language {
			color: #fff;
			position: absolute;
			top: 5px;
			right: 0px;
		}
	}
	.show-pwd {
		position: absolute;
		right: 10px;
		top: 7px;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}
	.thirdparty-button {
		position: absolute;
		right: 35px;
		bottom: 28px;
	}
	footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 1.2em 0;
		color: #fff;
	}
}
</style>
